<template>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="支付状态">
            <el-select v-model="queryInfo.status" placeholder="支付状态" clearable>
                        <el-option label="未支付" value="1"/>
                        <el-option label="已支付" value="2"/>
                        <el-option label="已取消" value="3"/>
            </el-select>
        </el-form-item>
        <el-form-item label="课程名称">
            <el-select v-model="queryInfo.courseId" placeholder="课程名称" clearable>
                        <el-option 
                            v-for="item in courses"
                            :key="item.id"
                            :label="item.courseName" 
                            :value="item.id"/>
            </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
        <!-- <el-button type="success" @click="onAdd">添加订阅信息类型</el-button> -->
      </el-form-item>
    </el-form>
    <!-- 信息展览 -->
    <el-table :data="tableData" stripe style="width: 100%">
    <!-- <el-table-column prop="id" label="id" width="50" /> -->
    
    <el-table-column prop="id" label="订阅ID" width="120" />
    <el-table-column prop="course.courseName" label="课程名称" width="120" />
    <el-table-column prop="user.userName" label="订阅用户名" width="120" />
    <el-table-column prop="user.password" label="订阅用户密码" width="120" />
    <el-table-column prop="user.name" label="订阅用户姓名" width="120" />
    <el-table-column prop="price" label="支付价格" width="120" />
    <el-table-column prop="purchaseTime" label="订阅时间" width="120" />
    <el-table-column prop="status" label="支付状态" width="120">
        <template #default="scope">
          <!-- 根据 status 值显示不同的文字描述 -->
          <span v-if="scope.row.status === 1">未支付</span>
          <span v-else-if="scope.row.status === 2">已支付</span>
          <span v-else-if="scope.row.status === 3">已取消</span>
          <span v-else>未知状态</span>
        </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作" min-width="100">
        <template #default="scope">
            <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改支付状态</el-button>
            <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>   
        </template>
    </el-table-column>

    
  </el-table>
   <!-- 分页 -->
   <el-pagination
        style="margin-top: 20px;"
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[2, 5, 10, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />

        <!-- <el-dialog v-model="saveOrupdateVisible" :title="saveOrupdatetitle" width="500"/> -->
        <el-dialog v-model="saveOrupdateVisible" :title="saveOrupdatetitle" width="500">
            <el-form :model="courseOrder">
                <el-form-item label="支付状态" :label-width="formLabelWidth">
                    <el-select v-model="courseOrder.status" placeholder="支付状态" clearable>
                        <el-option label="未支付" value="1" key="1"/>
                        <el-option label="已支付" value="2" key="2"/>
                        <el-option label="已取消" value="3" key="3"/>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="saveOrUpdate">
                        {{saveOrupdateType}}
                    </el-button>
                </div>
            </template>
        </el-dialog>
  </template>
  
<script setup>
import { onMounted,reactive,ref } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
  const tableData = ref([])
//   定义一个方法当页面加载时就调用
  onMounted(() => {
    getList();
    courseList();
    // userList();
  })
//   定义一个全局参数变量
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    id:'',
    courseId:'',
    userId:'',
    price:'',
    purchaseTime:'',
    status:''

    
})
const changType = (row) => {
    if(row == "已支付"){
        courseOrder.value.status = 1;
    }else if(row == "已取消"){
        courseOrder.value.status = 2; 
    }else{
        courseOrder.value.status = 3; 
    }
}
//   定义一个方法，用于获取课程列表
const getList = () => {
// 使用axios调用后端接口获取数据
    axios.get('/courseOrder/selectAll',{
        params: queryInfo.value
    })
    .then((resp) => {
        let result = resp.data // 后端返回的数据
        if (result.code == 1) {
        total.value = result.data.total
        tableData.value = result.data.list
        }else{
        ElMessage.error('获取课程列表失败')
        }
    })
}
//定义一个数组，用于存放课程集合
const courses = ref([])
//定义一个方法，来查询所有的课程集合
const courseList = () =>{
    axios.get('/course/selectAll')
    .then((resp) => {
        let result = resp.data // 后端返回的数据    
        if (result.code == 1) {
           //想要把id作为数组下标，name作为value值
           courses.value = result.data.list
           console.log(courses.value);             
        }else{
            ElMessage.error('获取课程分类列表失败')
        }
        
    })
}
//定义一个数组，用于存放user集合
const users = ref([])
//定义一个方法，来查询所有的课程集合
const userList = () =>{
    axios.get('/user/selectAll')
    .then((resp) => {
        let result = resp.data // 后端返回的数据    
        if (result.code == 1) {
           //想要把id作为数组下标，name作为value值
           users.value = result.data.list
           console.log(users.value);             
        }else{
            ElMessage.error('获取课程分类列表失败')
        }
        
    })
}
// 分页
// 分页操作
// 定义一个数据总条数
const total = ref(0)
const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getList();
}

//  添加和修改方法使用同一个弹窗
//   定义变量，用于保存添加或修改的标题
const saveOrupdatetitle = ref('')
//   定义变量，用于保存添加或修改的对话框是否显示
const saveOrupdateVisible=ref(false);
//   定义变量，用于修改弹出框确认类型
const saveOrupdateType = ref('')
//   定义对象，存放课程类型字段
const courseOrder = ref({
    id:'',
    courseId:'',
    userId:'',
    price:'',
    purchaseTime:'',
    status:''

})


//1.修改课程类型方法
const toEdit = row => {
    saveOrupdatetitle.value = '修改课程类型'
    saveOrupdateVisible.value = true
    saveOrupdateType.value = '确认修改'
    courseOrder.value = row
    
}


//2.添加课程类型方法

//   定义一个方法，用于添加课程类型
const onAdd = row => {
    saveOrupdatetitle.value = '添加课程类型'
    saveOrupdateVisible.value = true
    saveOrupdateType.value = '确认添加'
    courseOrder.value = {
        name:''
    }
}
//3.弹出框方法
//   定义一个方法，用于关闭对话框
const close = () => {
    saveOrupdateVisible.value = false
}
//   定义一个方法，用于保存或修改课程类型
//   添加
const saveOrUpdate = () => {
    if (saveOrupdateType.value == '确认添加') {
        axios.post('/courseOrder/insert', courseOrder.value)
            .then((resp) => {
                let result = resp.data // 后端返回的数据
                if (result.code == 1) {
                    ElMessage.success('添加订阅信息成功')  
                    getList()
                } else {
                    ElMessage.error('添加订阅信息失败')
                }
            })  
    }else   {

        //修改  
        axios.put('/courseOrder/update', courseOrder.value)
        .then((resp) => {
            let result = resp.data // 后端返回的数据

            if (result.code == 1) {
                ElMessage.success('修改订阅信息成功')

                getList()
            } else {
                ElMessage.error('修改订阅信息失败')
            }
        })
      
    }
    saveOrupdateVisible.value = false
}


// 删除方法
const onDel = id => {
    ElMessageBox.confirm('此操作将永久删除该课程类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',  
    })
    .then(() => {
        axios.delete('/courseOrder/'+id) 
        .then((resp) => {
            let result = resp.data // 后端返回的数据
            if (result.code == 1) {
                getList()
                ElMessage.success('删除订阅信息成功')
            } else {
                ElMessage.error('删除订阅信息失败')
            }
        })
    })  
}


    


  const formInline = reactive({
    user: '',
    region: '',
    date: '',
  })
  
  
  </script>
  
  <style>
  .demo-form-inline {
    margin-top: 20px;
    margin-left: 20px;
  }
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  </style>